<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="warp">
    <h3 class="text-center">系统设置</h3>
    <div
      class="box"
      style="width: 1500px; height: 700px; border-radius: 20px; background-color: #fff"
    >
      <div
        style="
          font-size: 28px;
          width: 1440px;
          border-bottom: 1px #ccc solid;
          margin: 0 30px;
          padding: 20px 0;
        "
        @click="btn"
      >
        账户安全
      </div>
      <div class="titleBox" v-show="flag">
        <div class="bt" style="font-size: 30px">账户安全</div>
        <div>
          <p>更改密码</p>
          <el-form :model="form" label-width="auto" style="max-width: 1400px">
            <p>当前密码</p>
            <el-form-item>
              <el-input v-model="form.username" />
            </el-form-item>
            <p>新密码</p>
            <el-form-item>
              <el-input v-model="form.username" />
            </el-form-item>
            <p>确认密码</p>
            <el-form-item>
              <el-input v-model="form.username" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div style="margin: 0 30px; margin-top: 20px">
        <el-button style="width: 120px; height: 40px">重置设置</el-button>
        <el-button type="primary" @click="onSubmit" style="width: 120px; height: 40px"
          >保存设置</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const flag = ref(false)
//点击出现更改密码
const btn = () => {
  flag.value = true
}
const form = ref({
  username: '',
})

const onSubmit = () => {
  console.log('submit!')
}
</script>

<style scoped>
.warp {
  width: 100%;
  height: 900px;
  background-color: #eee;
  padding: 20px;
}
.text-center {
  font-size: 30px;
}
.titleBox {
  padding: 28px;
}

.titleBox p {
  font-size: 24px;
}
</style>
